<template>
  <view class="no-used">
    <!-- <scroll-view
      class="list-wrap"
      :class="{ 'list-height': data.list && data.list.length > 4 }"
      scroll-y="true">
      <view class="item" v-for="(item, index) in data.list" :key="index">
        <CouponItem :selectId="data.selectItem.id" :page-type="3" :items="item"></CouponItem>
      </view>
    </scroll-view> -->
    <QcscrollUni
      ref="mescrollRef"
      :getData="getData"
      :top="topScroll"
      :bottom="bottomScroll"
      :height="heightScroll">
      <view
        class="item-wrap"
        :class="{ top: index === 0 }"
        v-for="(item, index) in data.list"
        :key="index">
        <CouponItem
          :selectId="data.selectId"
          :page-type="3"
          :items="item"
          :expired="true"
          :couponType="2"
          @select-item="selectItem"></CouponItem>
      </view>
    </QcscrollUni>
  </view>
</template>

<script lang="ts" setup>
import QcscrollUni from '@/components/qcscroll/qcscrollUni.vue';
import CouponItem from '@/components/couponItem/couponItem.vue';
import { pagingEntity } from '@/service/apis/market';
import { getSystemInfo, getwv } from '@mixins/info';

const topScroll = '104rpx';
const bottomScroll = '0rpx';
const info = getSystemInfo();
const heightScroll = `${
  info.screenHeight - getwv(53) - info.statusBarHeight - info.navigationBarHeight
}px`;

const data = reactive({
  list: [] as any,
  selectId: '',
});

// 上拉加载的回调
const getData = (
  extraParams: { pageNum: number; pageSize: number } = { pageNum: 1, pageSize: 10 }
) => {
  return new Promise(resolve => {
    pagingEntity(2, extraParams)
      .then((res: any) => {
        if (extraParams.pageNum === 1) {
          data.list = res.dataList;
        } else {
          data.list = [...data.list, ...res.dataList];
        }
        resolve({ list: data.list, total: res.totalCount });
      })
      .catch(() => {
        resolve({ list: [], total: 0 });
      });
  });
};

// 点击事件
const selectItem = (item: any) => {
  data.selectId = item.id;
  uni.navigateTo({
    url: `/pagesMyCenter/coupon/couponDetail?id=${item.id}&expired=true`,
  });
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>